<script setup lang="ts">
import { ref, computed, watch } from "vue";
import yamlLabel from "./yamlLabel.json";

defineOptions({
  name: "formItemSimple"
});

let timer = null;
const props = defineProps(["label", "data", "index", "parent", "disabled"]);
const emit = defineEmits(["data-change"]);
const data = ref(props.data);
const reflesh = ref(true);
const dataType = computed(() => {
  if (props.data === null) return "null";
  else if (props.data instanceof Array) return "array";
  else if (props.data instanceof Object) return "object";
  else return typeof props.data;
});

watch(
  data,
  (newVal, oldVal) => {
    if (timer !== null) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      console.log(`${props.label}: ${newVal}, ${oldVal}`);
      if (props.index !== undefined) {
        emit("data-change", props.label, newVal, props.index);
      } else {
        emit("data-change", props.label, newVal);
      }
    }, 500);
  },
  { deep: true }
);

const changeData = (
  key: string | number,
  value: any,
  index: string | number
) => {
  if (dataType.value == "object") {
    data.value[key] = value;
  } else if (dataType.value == "array") {
    data.value[index][key] = value;
  }
};

const handleBackspace = event => {
  event.preventDefault();
};
</script>

<template>
  <el-card
    v-if="dataType == 'array' || dataType == 'object'"
    class="warp"
    shadow="hover"
  >
    <div class="header">
      <div :style="{ 'border-left-color': 'rgb(35, 98, 251)' }" class="mark" />
      <div class="title">
        {{ yamlLabel[props.label] || props.label }}
      </div>
    </div>
    <div class="content">
      <template v-if="dataType == 'array' && reflesh">
        <div class="array-div" v-for="(item, index) in props.data" :key="index">
          <el-card class="warp" shadow="hover">
            <FormItemSimple
              v-for="(value, key) in item"
              :label="key"
              :data="value"
              :key="key"
              :index="index"
              :parent="props.label"
              :disabled="props.disabled == true"
              @data-change="changeData"
            />
          </el-card>
        </div>
      </template>
      <template v-else-if="dataType == 'object'">
        <FormItemSimple
          v-for="(value, key) in props.data"
          :label="key"
          :data="value"
          :key="key"
          :parent="props.label"
          :disabled="props.disabled == true"
          @data-change="changeData"
        />
      </template>
    </div>
  </el-card>
  <el-form-item
    v-else-if="
      props.label != 'artifacts-dir' &&
      props.label != 'Jtl_DIR' &&
      props.label != 'testplans_DIR'
    "
    :label="yamlLabel[props.label] || props.label"
    :key="props.label"
    :prop="props.label"
  >
    <el-input
      v-if="dataType == 'string'"
      v-model="data"
      :disabled="props.disabled == true"
    />
    <el-input-number
      v-if="dataType == 'number' || dataType == 'null'"
      v-model="data"
      :disabled="props.disabled == true"
      :min="0"
      :value-on-clear="0"
    />
    <!-- <el-input-number
      v-if="dataType == 'number' || dataType == 'null'"
      v-model="data"
      :disabled="props.disabled == true"
      :min="0"
      :value-on-clear="0"
      @keydown.backspace.native="handleBackspace"
    /> -->
    <el-switch
      v-if="dataType == 'boolean'"
      v-model="data"
      active-text="true"
      inactive-text="False"
      :disabled="props.disabled == true"
    />
  </el-form-item>
</template>

<style lang="scss" scoped>
.warp {
  flex-grow: 1;
  margin-bottom: 20px;
}

.header {
  display: flex;
  align-items: center;
  padding: 5px 15px;

  .header-input {
    margin: 0 10px;
  }
}

.mark {
  height: 14px;
  border-left-style: solid;
  border-left-width: 4px;
  border-radius: 2px;
}

.title {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;

  .title-icon {
    margin-left: 10px;
    color: rgb(35 98 251);
  }

  .title-button {
    margin-left: 10px;
  }
}

.content {
  padding: 0 20px;

  .array-div {
    display: flex;
    align-items: center;
  }
}
</style>
